<template>
  <view class="charging-progress-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="nav-content">
        <!-- 返回按钮 -->
        <view class="back-icon" @tap="goBack">
          <image src="/static/tabbar/back.png" mode="aspectFit"></image>
        </view>
        <text class="title">充电中</text>
      </view>
    </view>

    <!-- 充电信息卡片 -->
    <view class="charging-card">
      <!-- 充电信息 -->
      <view class="charging-info">
        <view class="info-item">
          <text class="info-label">充电桩编号：</text>
          <text class="info-value">{{ chargingData.stationId }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">充电模式：</text>
          <text class="info-value">{{ chargingData.mode }}</text>
        </view>
      </view>

      <!-- 充电进度圆环 -->
      <view class="progress-circle-container">
        <view class="progress-circle">
          <view class="circle-bg"></view>
          <view class="circle-progress" :style="progressStyle"></view>
          <view class="circle-mask" v-if="chargingProgress > 50"></view>
          <view class="circle-content">
            <text class="charging-text">正在充电</text>
          </view>
        </view>
      </view>

      <!-- 充电参数 -->
      <view class="charging-params">
        <view class="param-item">
          <view class="param-header">
            <text class="param-label">充电功率：</text>
            <text class="param-value">{{ chargingData.power }} kW</text>
          </view>
          <view class="power-progress-bar">
            <view class="power-progress" :style="{ width: chargingData.powerPercentage + '%' }"></view>
          </view>
        </view>

        <view class="param-item">
          <text class="param-label">当前电压：</text>
          <text class="param-value">{{ chargingData.voltage }} V</text>
        </view>

        <view class="param-item">
          <text class="param-label">当前电流：</text>
          <text class="param-value">{{ chargingData.current }} A</text>
        </view>
      </view>
    </view>

    <!-- 调试区域 (可选) -->
    <view class="debug-section" v-if="showDebugInfo">
      <view class="debug-title">蓝牙通信日志</view>
      <scroll-view class="debug-content" scroll-y="true">
        <view v-for="(log, index) in bluetoothLogs" :key="index" class="log-item" :class="{
          'log-send': log.includes('📤'),
          'log-receive': log.includes('📥'),
          'log-parse': log.includes('🔍'),
          'log-update': log.includes('📊'),
          'log-error': log.includes('❌'),
          'log-success': log.includes('✅'),
          'log-connect': log.includes('🔌'),
          'log-init': log.includes('🚀')
        }">
          <text>{{ log }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 停止充电按钮 -->
    <view class="stop-btn" @tap="stopCharging">
      <text>{{ stopChargingText }}</text>
    </view>
  </view>
</template>


<script>
import GlobalBluetoothManager from '@/utils/GlobalBluetoothManager.js';
import packet645 from '@/utility/Packet645.js';

export default {
  data() {
    return {
      chargingData: {
        stationId: 'GZ-2023-1265',
        mode: '快速充电',
        power: 145,
        powerPercentage: 55, // 功率进度条百分比
        voltage: 380,
        current: 380
      },
      chargingProgress: 0, // 充电进度百分比
      animationTimer: null,

      // 蓝牙通信相关
      deviceId: '', // 设备ID
      isQueryingStatus: false, // 是否正在查询状态
      queryTimer: null, // 状态查询定时器
      dataUpdateTimer: null, // 数据更新定时器
      timeoutTimer: null, // 添加超时定时器
      showDebugInfo: true, // 是否显示调试信息
      bluetoothLogs: [], // 蓝牙通信日志
      stopChargingText: '开始充电',
    }
  },
  computed: {
    progressStyle() {
      // 将百分比转换为角度（0-360）
      const degrees = this.chargingProgress * 3.6; // 100% = 360度
      return {
        transform: `rotate(${degrees}deg)`
      };
    }
  },
  onLoad(options) {
    // 获取设备ID
    this.deviceId = options.deviceId;
    console.log('接收到的设备ID:', this.deviceId);

    // 启动进度条动画
    this.startProgressAnimation();

    // 设置蓝牙数据接收监听
    this.setupBluetoothListener();

    // 设置连接状态变化监听
    GlobalBluetoothManager.addConnectionListener((res) => {
      console.log('蓝牙连接状态变化:', res);
      if (!res.connected) {
        this.logBluetooth('蓝牙连接已断开');
        uni.showToast({
          title: '蓝牙连接已断开，正在重连...',
          icon: 'none',
          duration: 2000
        });

        if (res.errorCode === 10003) {
          setTimeout(() => {
            uni.showModal({
              title: '提示',
              content: '蓝牙连接已断开，请重新扫描连接',
              showCancel: false,
              success: () => {
                uni.navigateBack();
              }
            });
          }, 2000);
        }
      } else {
        // 延迟1秒后发送命令，确保连接稳定
        setTimeout(() => {
          this.sendInitialCommands();
        }, 1000);
      }
    });

    // 检查是否已连接设备
    if (GlobalBluetoothManager.isConnected() && GlobalBluetoothManager.getConnectedDeviceId() === this.deviceId) {
      this.logBluetooth('蓝牙已连接到当前设备: ' + this.deviceId);
      // 延迟1秒后发送命令，确保连接稳定
      setTimeout(() => {
        this.sendInitialCommands();
      }, 1000);
    } else if (GlobalBluetoothManager.isConnected() && GlobalBluetoothManager.getConnectedDeviceId() !== this.deviceId) {
      this.logBluetooth('蓝牙已连接到其他设备，需要重新连接到: ' + this.deviceId);
      // 断开当前连接，然后重新连接到目标设备
      this.reconnectToDevice();
    } else {
      // 未连接任何设备，尝试连接
      this.logBluetooth('蓝牙未连接，尝试连接设备: ' + this.deviceId);
      this.connectToDevice();
    }
  },
  onUnload() {
    // 组件销毁时清除所有定时器
    this.clearAllTimers();

    // 移除蓝牙数据接收监听器
    GlobalBluetoothManager.removeDataReceivedListener(this.handleReceivedData);

    // 移除连接状态监听器
    GlobalBluetoothManager.removeConnectionListener(this.handleConnectionStateChange);

    // 注意：不要在这里断开蓝牙连接，以保持全局连接状态
  },

  methods: {
    goBack() {
      // 清理资源
      this.clearAllTimers();

      // 获取当前页面栈
      const pages = getCurrentPages();

      if (pages.length > 1) {
        // 有上一页，正常返回
        uni.navigateBack();
      } else {
        // 没有上一页，返回到首页
        uni.switchTab({
          url: '/pages/index/index'
        });
      }
    },

    /**
     * 启动进度条动画
     */
    startProgressAnimation() {
      // 清除可能存在的定时器
      if (this.animationTimer) {
        clearInterval(this.animationTimer);
      }

      // 设置动画间隔，每秒更新充电进度
      this.animationTimer = setInterval(() => {
        // 模拟充电进度增加
        this.chargingProgress += 0.5;

        // 设置上限，到100%后重新开始，形成循环动画
        if (this.chargingProgress >= 100) {
          this.chargingProgress = 0;
        }
      }, 100);
    },

    /**
     * 停止充电
     */
    stopCharging() {
      uni.showModal({
        title: '提示',
        content: '确定要停止充电吗？',
        success: (res) => {
          if (res.confirm) {
            // 发送停止充电命令
            this.sendStopChargingCommand();
          }
        }
      });
    },

    /**
     * 设置蓝牙数据接收监听器
     */
    setupBluetoothListener() {
      try {
        // 设置蓝牙数据接收回调
        GlobalBluetoothManager.addDataReceivedListener(this.handleReceivedData);
        this.logBluetooth('蓝牙监听器设置成功');
      } catch (error) {
        this.logBluetooth('设置蓝牙监听器失败: ' + error.message);
      }
    },

    /**
     * 处理接收到的数据
     * @param {Object} result 接收到的数据对象
     */
    handleReceivedData(result) {
      try {
        // 检查接收到的数据是否有效
        if (!result || !result.value) {
          console.warn('接收到无效的蓝牙数据');
          return;
        }
        
        // 将ArrayBuffer转换为十六进制字符串
        const hexData = packet645.bytesToHex(result.value);
        
        // 检查十六进制数据是否有效
        if (!hexData || typeof hexData !== 'string' || hexData.length === 0) {
          console.warn('蓝牙数据转换为十六进制字符串失败');
          return;
        }

        // 格式化十六进制数据以便更好地显示
        const formattedHex = this.formatHexData(hexData);
        const timestamp = new Date().toLocaleTimeString();

        // 打印原始数据到日志
        this.logBluetooth(`接收报文 [${timestamp}]: ${formattedHex}`);

        // 使用Packet645工具类解析数据
        try {
          const dataField = packet645.DataAnalysis(hexData);
          
          if (dataField) {
            try {
              const decodedData = packet645.DataAnalys_33(dataField);
              this.logBluetooth('解析数据=======: ' + decodedData);
  
              // 更新UI显示的数据
              this.updateChargingData(decodedData);
            } catch (parseError) {
              console.error('解析数据字段错误:', parseError);
              this.logBluetooth('解析数据字段错误: ' + parseError.message);
            }
          } else {
            // 如果数据域为空，启动充电成功 则直接更新数据 
            this.updateChargingData(dataField);
          }
        } catch (analysisError) {
          console.error('分析蓝牙数据错误:', analysisError);
          this.logBluetooth('分析蓝牙数据错误: ' + analysisError.message);
        }
      } catch (error) {
        console.error('处理接收数据错误:', error);
        this.logBluetooth('处理接收数据错误: ' + error.message);
      }
    },

    /**
     * 重新连接到设备
     */
    async reconnectToDevice() {
      try {
        this.logBluetooth('断开现有连接并重新连接到: ' + this.deviceId);
        
        // 显示连接提示
        uni.showLoading({
          title: '正在连接充电桩...'
        });
        
        // 使用全局蓝牙管理器连接设备
        await GlobalBluetoothManager.connect(this.deviceId);
        
        uni.hideLoading();
        this.logBluetooth('成功连接到设备: ' + this.deviceId);
        
        // 延迟1秒后发送初始命令
        setTimeout(() => {
          this.sendInitialCommands();
        }, 1000);
      } catch (error) {
        uni.hideLoading();
        this.logBluetooth('重新连接失败: ' + error.message);
        
        uni.showModal({
          title: '连接失败',
          content: '无法连接到充电桩，是否重试？',
          success: (res) => {
            if (res.confirm) {
              this.reconnectToDevice();
            } else {
              uni.navigateBack();
            }
          }
        });
      }
    },
    
    /**
     * 连接到目标设备
     */
    async connectToDevice() {
      try {
        this.logBluetooth('尝试连接设备: ' + this.deviceId);
        
        // 显示连接提示
        uni.showLoading({
          title: '正在连接充电桩...'
        });
        
        // 使用全局蓝牙管理器连接设备
        await GlobalBluetoothManager.connect(this.deviceId);
        
        uni.hideLoading();
        this.logBluetooth('成功连接到设备: ' + this.deviceId);
        
        // 延迟1秒后发送初始命令
        setTimeout(() => {
          this.sendInitialCommands();
        }, 1000);
      } catch (error) {
        uni.hideLoading();
        this.logBluetooth('连接失败: ' + error.message);
        
        uni.showModal({
          title: '连接失败',
          content: '无法连接到充电桩，是否重试？',
          success: (res) => {
            if (res.confirm) {
              this.connectToDevice();
            } else {
              uni.navigateBack();
            }
          }
        });
      }
    },

    /**
     * 格式化十六进制数据以便更好地显示
     * @param {string} hexData 十六进制字符串
     * @returns {string} 格式化后的字符串
     */
    formatHexData(hexData) {
      // 每两个字符插入一个空格，便于阅读
      let formatted = '';
      for (let i = 0; i < hexData.length; i += 2) {
        formatted += hexData.substring(i, i + 2) + ' ';
        // 每16个字符(8个字节)后换行
        if ((i + 2) % 16 === 0 && i !== 0) {
          formatted += '\n';
        }
      }
      return formatted;
    },

    /**
     * 更新充电数据
     * @param {String} decodedData 解码后的数据
     */
    updateChargingData(decodedData) {
      console.log('进入解析方法11: ' + decodedData);
      // 这里根据实际的数据格式进行解析
      try {
        // 假设数据格式为: 电压(4字节) + 电流(4字节) + 功率(4字节)

        // 每2个字符代表一个字节，每4个字节代表一个值
        // 从十六进制字符串中提取数值，注意字节顺序
        if (decodedData && decodedData.length == 0) {
          if (this.timeoutTimer) {
            clearTimeout(this.timeoutTimer);
            this.timeoutTimer = null;
          }
          uni.hideLoading();
          // 启动充电成功
          if (this.stopChargingText == '开始充电') {
            
            this.stopChargingText = '停止充电';
          } else {
            uni.navigateTo({
              url: '/pages/order/order?deviceId=' + this.deviceId
            });
            this.stopChargingText = '开始充电';
          }
          return;
        }

        if (decodedData && '01' == decodedData) {
          uni.showToast({
            title: '设备异常，请检查设备',
            icon: 'none',
            duration: 2000
          });
          return;
        }

        if (!decodedData || typeof decodedData !== 'string') {
          console.warn('无效的解码数据格式');
          return;
        }
        
        // 确保数据长度足够进行解析
        if (decodedData.length < 8) {
          console.warn('解码数据长度不足');
          return;
        }

        const dataFlag = decodedData.substr(0, 8);
        console.log('进入数据解析方法22: ' + dataFlag);
        
        // 使用try-catch包装每个case处理，防止单个解析错误影响整体功能
        try {
          switch (dataFlag) {
            // 电压
            case '05010101':
              if (decodedData.length < 18) { // 确保有足够的数据长度
                console.warn('电压数据长度不足', decodedData);
                return;
              }
              const voltageHex = decodedData.substr(8, 10);
              console.log('进入电压解析方法33: ' + voltageHex);
              const voltage = packet645.HexToInt(voltageHex);
              // 检查电压值的合理性
              if (isNaN(voltage) || voltage < 0 || voltage > 1000) {
                console.warn('无效的电压值:', voltage);
                return;
              }
              this.chargingData.voltage = voltage; // 假设单位为0.1V
              this.logBluetooth(`更新数据: 电压=${voltage}V`);
              console.log('更新数据: 电压=' + voltage + 'V');
              break;
            
            // 电流
            case '06010101':
              if (decodedData.length < 20) { // 确保有足够的数据长度
                console.warn('电流数据长度不足', decodedData);
                return;
              }
              const currentHex = decodedData.substr(8, 12);
              console.log('进入电流解析方法44: ' + currentHex);
              try {
                const currentHexReverse = packet645.ReverseA(currentHex);
                let currentValue = packet645.HexToInt(currentHexReverse);
                // 检查电流值的合理性
                if (isNaN(currentValue) || currentValue < 0 || currentValue > 10000) {
                  console.warn('无效的电流值:', currentValue);
                  return;
                }
                currentValue = currentValue / 10;
                this.chargingData.current = currentValue;
                this.logBluetooth(`更新数据: 电流=${currentValue}A`);
                console.log('更新数据: 电流=' + currentValue + 'A');
              } catch (err) {
                console.error('电流解析错误:', err);
              }
              break;
            
            // 功率
            case '01010101':
              if (decodedData.length < 20) { // 确保有足够的数据长度
                console.warn('功率数据长度不足', decodedData);
                return;
              }
              const powerHex = decodedData.substr(8, 12);
              console.log('进入功率解析方法55: ' + powerHex);
              try {
                const powerHexReverse = packet645.ReverseA(powerHex);
                const power = packet645.HexToInt(powerHexReverse);
                // 检查功率值的合理性
                if (isNaN(power) || power < 0 || power > 10000) {
                  console.warn('无效的功率值:', power);
                  return;
                }
                this.chargingData.power = power;
                this.logBluetooth(`更新数据: 功率=${power}kW`);
                console.log('更新数据: 功率=' + power + 'kW');
              } catch (err) {
                console.error('功率解析错误:', err);
              }
              break;
              
            default:
              console.log('未知的数据标志:', dataFlag);
              break;
          }
        } catch (switchError) {
          console.error('处理数据标志出错:', switchError, dataFlag);
        }
      } catch (error) {
        console.error('进入更新数据出错方法66: ' + error.message);
        this.logBluetooth('更新数据出错: ' + error.message);
      }
    },

    /**
     * 发送停止充电命令
     */
    sendStopChargingCommand() {
      // 构建停止充电的命令
      const stopData = packet645.BuildPacket_645('aaaaaaaaaaaa', '11', '04000101', '01020304aa');
      const formattedStopData = this.formatHexData(stopData);
      this.logBluetooth(`发送停止充电命令: ${formattedStopData}`);
      console.log(`发送停止充电命令: ${stopData}`);

      return GlobalBluetoothManager.sendData(packet645.hexStringToArrayBuffer(stopData));
    },

    // 发送初始命令
    async sendInitialCommands() {
      try {
        // 发送开始充电命令
        // 显示加载框
        uni.showLoading({
          title: '正在发送充电命令...'
        });
        
        // 设置5秒超时定时器
        this.timeoutTimer = setTimeout(() => {
          uni.hideLoading();
          uni.showToast({
            title: '发送充电命令失败，请重试',
            icon: 'none',
            duration: 2000
          });
        }, 5000);

        // 正确
        const startData = packet645.BuildPacket_645('aaaaaaaaaaaa', '14', '0301010100000000', '01020304aa');
        // 错误测试
        // const startData = packet645.BuildPacket_645('aaaaaaaaaaaa', '143', '0301010100000000', '01020304aa');
        const formattedStart = this.formatHexData(startData);
        const formattedStartData = this.formatHexData(formattedStart);
        this.logBluetooth(`发送充电命令: ${formattedStartData}`);
        console.log(`发送充电命令: ${startData}`);
        await GlobalBluetoothManager.sendData(packet645.hexStringToArrayBuffer(startData));

        // 延迟500ms发送下一个命令
        await new Promise(resolve => setTimeout(resolve, 500));

        // 发送读取电压命令
        const voltageData = packet645.BuildPacket_645('aaaaaaaaaaaa', '11', '05010101', '');
        const formattedVoltageData = this.formatHexData(voltageData);
        const formattedVoltageData2 = this.formatHexData(formattedVoltageData);
        this.logBluetooth(`发送电压命令: ${formattedVoltageData2}`);
        console.log(`发送电压命令: ${voltageData}`);
        GlobalBluetoothManager.sendData(packet645.hexStringToArrayBuffer(voltageData));

        // 延迟500ms发送下一个命令
        await new Promise(resolve => setTimeout(resolve, 500));

        // 发送读取电流命令
        const currentData = packet645.BuildPacket_645('aaaaaaaaaaaa', '11', '06010101', '');
        const formattedCurrentData = this.formatHexData(currentData);
        const formattedCurrentData2 = this.formatHexData(formattedCurrentData);
        this.logBluetooth(`发送电流命令: ${formattedCurrentData2}`);
        console.log(`发送电流命令: ${currentData}`);
        GlobalBluetoothManager.sendData(packet645.hexStringToArrayBuffer(currentData));

        // 延迟500ms发送下一个命令
        await new Promise(resolve => setTimeout(resolve, 500));

        // 发送读取功率命令
        const powerData = packet645.BuildPacket_645('aaaaaaaaaaaa', '11', '01010101', '');
        const formattedPowerData = this.formatHexData(powerData);
        const formattedPowerData2 = this.formatHexData(formattedPowerData);
        this.logBluetooth(`发送功率命令: ${formattedPowerData2}`);
        console.log(`发送功率命令: ${powerData}`);
        GlobalBluetoothManager.sendData(packet645.hexStringToArrayBuffer(powerData));

      } catch (error) {
        this.logBluetooth('发送初始命令失败: ' + error.message);
        console.log('发送初始命令失败: ' + error.message);
        uni.showToast({
          title: '发送命令失败，请重试',
          icon: 'none'
        });
      }
    },

    /**
     * 记录蓝牙日志
     * @param {String} message 日志消息
     */
    logBluetooth(message) {
      const timestamp = new Date().toLocaleTimeString();
      const logEntry = `[${timestamp}] ${message}`;
      this.bluetoothLogs.unshift(logEntry); // 添加到日志开头
      
      // 限制日志条数，避免过多导致性能问题
      if (this.bluetoothLogs.length > 100) {
        this.bluetoothLogs.pop(); // 移除最后一条
      }
      
      // 在控制台也输出日志
      console.log(`蓝牙日志: ${message}`);
    },
    
    /**
     * 清除所有定时器
     */
    clearAllTimers() {
      // 清除进度条动画定时器
      if (this.animationTimer) {
        clearInterval(this.animationTimer);
        this.animationTimer = null;
      }
      
      // 清除查询状态定时器
      if (this.queryTimer) {
        clearInterval(this.queryTimer);
        this.queryTimer = null;
      }
      
      // 清除数据更新定时器
      if (this.dataUpdateTimer) {
        clearInterval(this.dataUpdateTimer);
        this.dataUpdateTimer = null;
      }
      
      // 清除超时定时器
      if (this.timeoutTimer) {
        clearTimeout(this.timeoutTimer);
        this.timeoutTimer = null;
      }
    },
    
    /**
     * 处理蓝牙连接状态变化
     * @param {Object} res 连接状态信息
     */
    handleConnectionStateChange(res) {
      console.log('处理蓝牙连接状态变化:', res);
      
      if (!res.connected) {
        this.logBluetooth('蓝牙连接已断开');
        
        if (res.deviceId === this.deviceId) {
          uni.showToast({
            title: '蓝牙连接已断开',
            icon: 'none',
            duration: 2000
          });
        }
      } else if (res.deviceId === this.deviceId) {
        this.logBluetooth('蓝牙连接已建立');
        
        // 延迟1秒后发送命令，确保连接稳定
        setTimeout(() => {
          this.sendInitialCommands();
        }, 1000);
      }
    }
  }
}
</script>

<style lang="scss">
.charging-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f0f2f5;
  overflow: hidden;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #42a5f5;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 100;

  .nav-content {
    width: 100%;
    height: 88rpx;
    position: relative;
    margin-top: calc(var(--status-bar-height) + 30rpx);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24rpx;
    box-sizing: border-box;
  }

  .back-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 24px;
      height: 24px;
      opacity: 0.9;
    }
  }

  .title {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    flex: 1;
    margin: 0 32px;
    color: #fff;
  }
}

.charging-card {
  margin-top: calc(88rpx + var(--status-bar-height) + 30rpx);
  margin-left: 16px;
  margin-right: 16px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.charging-info {
  .info-item {
    display: flex;
    font-size: 28rpx;
    margin-bottom: 15rpx;

    .info-label {
      color: #666;
    }

    .info-value {
      color: #333;
      font-weight: 500;
      margin-left: 10rpx;
    }
  }
}

.progress-circle-container {
  display: flex;
  justify-content: center;
  margin: 40rpx 0;

  .progress-circle {
    position: relative;
    width: 300rpx;
    height: 300rpx;

    .circle-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 15rpx solid #f0f0f0;
      box-sizing: border-box;
    }

    .circle-progress {
      position: absolute;
      width: 300rpx;
      height: 300rpx;
      border-radius: 50%;
      border: 15rpx solid transparent;
      border-top: 15rpx solid #1890ff;
      border-right: 15rpx solid #1890ff;
      box-sizing: border-box;
      transform-origin: center;
      transition: transform 0.1s linear;
    }

    .circle-mask {
      position: absolute;
      width: 300rpx;
      height: 300rpx;
      border-radius: 50%;
      border: 15rpx solid transparent;
      border-bottom: 15rpx solid #1890ff;
      border-left: 15rpx solid #1890ff;
      box-sizing: border-box;
    }

    .circle-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .charging-text {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
    }
  }
}

.charging-params {
  .param-item {
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .param-header {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      margin-bottom: 15rpx;

      .param-label {
        color: #666;
      }

      .param-value {
        color: #333;
        font-weight: 500;
      }
    }

    .param-label {
      width: 180rpx;
      color: #666;
      font-size: 28rpx;
    }

    .param-value {
      color: #333;
      font-size: 28rpx;
      font-weight: 500;
    }
  }

  .power-progress-bar {
    width: 100%;
    height: 10rpx;
    background-color: #f0f0f0;
    border-radius: 10rpx;
    overflow: hidden;

    .power-progress {
      height: 100%;
      background-color: #1890ff;
      border-radius: 10rpx;
    }
  }
}

.debug-section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 12px;
  padding: 20rpx;

  .debug-title {
    font-size: 28rpx;
    font-weight: 500;
    margin-bottom: 20rpx;
  }

  .debug-content {
    max-height: 300rpx;
    overflow-y: auto;

    .log-item {
      padding: 10rpx;
      margin-bottom: 10rpx;
      font-size: 24rpx;
      border-left: 4rpx solid #999;

      &.log-send {
        border-left: 4rpx solid #1890ff;
        color: #1890ff;
      }

      &.log-receive {
        border-left: 4rpx solid #52c41a;
        color: #52c41a;
      }

      &.log-parse {
        border-left: 4rpx solid #722ed1;
        color: #722ed1;
      }

      &.log-update {
        border-left: 4rpx solid #fa8c16;
        color: #fa8c16;
      }

      &.log-error {
        border-left: 4rpx solid #f5222d;
        color: #f5222d;
      }

      &.log-success {
        border-left: 4rpx solid #52c41a;
        color: #52c41a;
      }

      &.log-connect {
        border-left: 4rpx solid #13c2c2;
        color: #13c2c2;
      }

      &.log-init {
        border-left: 4rpx solid #2f54eb;
        color: #2f54eb;
      }
    }
  }
}

.stop-btn {
  margin: 40rpx 30rpx;
  height: 90rpx;
  background-color: #FF6A3C;
  color: #fff;
  border-radius: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 10rpx rgba(255, 106, 60, 0.3);

  &:active {
    transform: scale(0.98);
    background-color: #e5593a;
  }
}
</style>
